<template>
  <div class="newTask-container">
    <v-form v-model="valid">
      <v-tooltip content-class="tooltip" right>
        <template v-slot:activator="{ on }">
          <v-icon class="pointer tooltip-icon" v-on="on" color="#BABABC"
            >mdi-information</v-icon
          >
        </template>
        <v-card class="tooltip-info" width="280">
          <v-card-title class="info-title"> Project Info </v-card-title>
          <v-card-text class="info-content">
            <v-spacer class="text-left">
              <v-col class="pa-0 mb-2">
                <v-row no-gutters>
                  <v-col :cols="6">Project Type</v-col>
                  <v-col :cols="6">DL</v-col>
                </v-row>
              </v-col>
              <v-col class="pa-0 mb-2">
                <v-row no-gutters>
                  <v-col :cols="6">Project Description</v-col>
                  <v-col :cols="6">2 nd Launching</v-col>
                </v-row>
              </v-col>
            </v-spacer>
          </v-card-text>
        </v-card>
      </v-tooltip>
      <v-container class="pl-16">
        <v-row class="align-center line" no-gutters>
          <v-col cols="2" class="label-wrap">
            <span>Customer Name</span>
          </v-col>
          <v-col cols="3">
            <v-text-field
              v-model="customerName"
              class="gray-input"
              dense
              hide-details
              label="Enter the customer Name"
              required
              solo
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row class="align-center line" no-gutters>
          <v-col :cols="6">
            <v-row no-gutters>
              <v-col cols="4" class="label-wrap">
                <span>Job Name</span>
              </v-col>
              <v-col cols="6">
                <v-text-field
                  v-model="jobName"
                  class="gray-input"
                  dense
                  hide-details
                  label="Enter the Task name"
                  required
                  solo
                ></v-text-field>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
        <v-row class="align-center line" no-gutters>
          <v-col>
            <v-row no-gutters>
              <v-col cols="4" class="label-wrap">
                <span>Job Number</span>
              </v-col>
              <v-col cols="4">
                <v-text-field
                  v-model="taskNumber"
                  class="gray-input"
                  dense
                  hide-details
                  label="Enter the job number"
                  required
                  solo
                ></v-text-field>
              </v-col>
            </v-row>
          </v-col>
          <v-col>
            <v-row no-gutters>
              <v-col cols="4" class="label-wrap">
                <span>EST. Date to finish</span>
              </v-col>
              <v-col cols="4">
                <v-text-field
                  v-model="finishDate"
                  class="gray-input"
                  dense
                  hide-details
                  label="Enter the date"
                  required
                  solo
                ></v-text-field>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
        <v-row class="align-center line" no-gutters>
          <v-col cols="2" class="label-wrap">
            <span>Address</span>
          </v-col>
          <v-col cols="2">
            <v-text-field
              v-model="address"
              class="gray-input"
              dense
              hide-details
              label="Enter the Task Location"
              required
              solo
            ></v-text-field>
          </v-col>
          <v-col class="flex-grow-0 ml-3">
            <v-icon> mdi-account-box </v-icon>
          </v-col>
        </v-row>
      </v-container>
      <v-expansion-panels
        class="panels"
        accordion
        focusable
        flat
        multiple
        v-model="panel"
      >
        <v-expansion-panel>
          <v-expansion-panel-header>Task Details</v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-row class="line align-center" no-gutters>
              <v-col :cols="6">
                <v-row no-gutters>
                  <v-col cols="4" class="label-wrap">
                    <span>Task Number</span>
                  </v-col>
                  <v-col cols="6">
                    <v-text-field
                      v-model="taskNumber"
                      class="gray-input"
                      dense
                      hide-details
                      label="Enter Task Number"
                      required
                      solo
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
            <v-row class="line align-center" no-gutters>
              <v-col :cols="6">
                <v-row no-gutters>
                  <v-col cols="4" class="label-wrap">
                    <span>Task Name</span>
                  </v-col>
                  <v-col cols="6">
                    <v-text-field
                      v-model="taskName"
                      class="gray-input"
                      dense
                      hide-details
                      label="Enter Task name"
                      required
                      solo
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
            <v-row class="line align-stretch" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Task Description</span>
              </v-col>
              <v-col :cols="9">
                <v-textarea
                  v-model="taskDescription"
                  class="gray-input"
                  height="104"
                  dense
                  hide-details
                  label="Please enter task description"
                  required
                  solo
                  no-resize
                ></v-textarea>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col class="label-wrap" :cols="2">
                <span>Task Owner</span>
              </v-col>
              <v-col :cols="3">
                <v-text-field
                  v-model="taskOwner"
                  class="gray-input"
                  dense
                  hide-details
                  label="Please enter task owner"
                  required
                  solo
                ></v-text-field>
              </v-col>
              <v-col class="flex-grow-0 ml-3">
                <v-icon> mdi-account-box </v-icon>
              </v-col>
            </v-row>
            <v-row class="line" no-gutters>
              <v-col>
                <v-row no-gutters>
                  <v-col :cols="4" class="label-wrap">
                    <span>Start Time</span>
                  </v-col>
                  <v-col :cols="6">
                    <RangePicker
                      v-model="startTime"
                      :max="endTime"
                      :defaultDatePage="startDefaultTimePage"
                      hide-details
                      label="place select start time"
                    ></RangePicker>
                  </v-col>
                </v-row>
              </v-col>
              <v-col>
                <v-row no-gutters>
                  <v-col :cols="4" class="label-wrap">
                    <span>End Time</span>
                  </v-col>
                  <v-col :cols="6">
                    <RangePicker
                      v-model="endTime"
                      :min="startTime"
                      :defaultDatePage="endDefaultTimePage"
                      hide-details
                      label="place select start time"
                    ></RangePicker>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>Attachment</v-expansion-panel-header>
          <v-expansion-panel-content>
            <FileList :images="attachmentImages"></FileList>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header disable-icon-rotate>
            Report Problem
            <template v-slot:actions>
              <v-icon color="error"> mdi-tune </v-icon>
            </template>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <EditableTable
              class="table"
              roundedHeader
              hide-default-footer
              :headers="tableHeaders"
              :items="items"
            >
              <template #item="{ item }">
                <tr>
                  <td>
                    <v-icon color="#79839B" class="icon pointer"
                      >mdi-minus-circle</v-icon
                    >
                  </td>
                  <td width="210">
                    <v-text-field
                      append-outer-icon="mdi-magnify"
                      class="gray-input"
                      dense
                      hide-details
                      solo
                    ></v-text-field>
                  </td>
                  <td
                    v-for="header in tableHeaders.slice(2)"
                    :key="header.value"
                  >
                    {{ item[header.value] }}
                  </td>
                </tr>
              </template>
            </EditableTable>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-form>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { validateDate } from "@/common/constants/Utils";
import EditableTable from "@/components/Project/Table/EditableTable.vue";
import RangePicker from "@/components/Project/RangePicker/RangePicker.vue";
import FileList from "@/components/Project/AddNew/FileList.vue";
@Component({
  components: {
    EditableTable,
    RangePicker,
    FileList,
  },
})
export default class NewTask extends Vue {
  valid = false;
  panel = [0, 1, 2];

  //basic info
  customerName = "";
  jobName = "";
  jobNumber = "";
  finishDate = "";
  address = "";

  // task details
  taskNumber = "";
  taskName = "";
  taskDescription = "";
  taskOwner = "";
  startTime = "09:21";
  get startDefaultTimePage() {
    if (this.endTime !== "") {
      const splitEndTime = this.endTime.split(" ");
      if (validateDate(splitEndTime[0])) {
        return splitEndTime[0].split("-").slice(0, 2).join("-");
      }
      return "";
    } else {
      return "";
    }
  }
  endTime = "2011-10-12 09:11";
  get endDefaultTimePage() {
    if (this.endTime !== "") {
      const splitStartTime = this.startTime.split(" ");
      if (validateDate(splitStartTime[0])) {
        return splitStartTime[0].split("-").slice(0, 2).join("-");
      }
      return "";
    } else {
      return "";
    }
  }

  // attachment
  attachmentImages = [
    {
      id: "1",
      src: "https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1600",
      name: "STD202201",
    },
    {
      id: "2",
      src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
      name: "STD202202",
    },
    {
      id: "3",
      src: "https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&w=400",
      name: "STD202203",
    },
  ];

  // Report Problem
  tableHeaders = [
    {
      value: "prepend",
      align: "center",
    },
    {
      text: "Serial Number",
      value: "number",
    },
    {
      text: "Item Description",
      value: "description",
    },
    {
      text: "Symptoms",
      value: "symptoms",
    },
    {
      text: "Problem Type",
      value: "type",
    },
    {
      text: "Solution",
      value: "solution",
    },
  ];
  items = [
    {
      number: "",
      description: "",
      symptoms: "",
      type: "",
      solution: "",
    },
  ];
}
</script>

<style lang="scss" scoped>
@import "./NewTask.scss";
</style>
